import React, { useEffect, useState } from "react";
import { useMousePosition,useCountDown } from '@/hooks/index'


export const Count: React.FC = () => {
    const [count, setCount] = useState(0)
    const [flag, setFlag] = useState(false)

    const add = () => {
        setCount(prev => prev += 1)
    }

    const toggle = () => {
        setFlag(prev => !prev)
    }

    useEffect(() => {
        console.log("useEffect执行了！")
    }, [count])

    return (
        <>
            <h1>count的值是：{count}</h1>
            <h1>flag的值时：{String(flag)}</h1>
            <hr />
            <button onClick={add}>+1</button>
            <button onClick={toggle}>toggle</button>
        </>
    )
}



const MouseMove: React.FC = () => {

    let position = useMousePosition(200)

    return (
        <>
            <h1>鼠标的位置在：{JSON.stringify(position)}</h1>
        </>
    )
}

export const TestMouseMove: React.FC = () => {
    const [flag, setFlag] = useState(true)
    const toggle = () => {
        setFlag(prev => !prev)
    }
    return (
        <>
            <button onClick={toggle}>Toggle</button>
            <hr />
            {flag && <MouseMove />}
        </>
    )
}


export const CounterDown: React.FC = () => {

    const [count,disabled] = useCountDown(10)

    const makeSure = () => {
       console.log('确认此协议')
    }

    return (
        <>
            <button disabled={disabled} onClick={makeSure}> {disabled ? `请仔细阅读本协议（${count}）秒` : '确认此协议'}  </button>
        </>
    )
}





